<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/admin/category-list' }">分类管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  <el-table
            :data="categoryArr"
            style="width: 100%">
    <!--type=index 设置这一列显示的内容为编号-->
    <el-table-column type="index" label="编号" width="100px" align="center"></el-table-column>
    <el-table-column
        prop="categoryName"
        label="分类名称"
       align="center">
    </el-table-column>
    <el-table-column label="操作" align="center" width="200px">
      <!--scope里面装着当前行所对应的对象信息
      scope.$index 得到当前行对应的对象在数组中的下标
      scope.row 得到当前行对应的对象
      -->
      <template slot-scope="scope">
        <el-button size="mini" @click="update(scope.row)"
                   type="success" style="margin-right: 20px">修改</el-button>
        <el-popconfirm
            title="您确定删除此分类吗?"
            @confirm=""
        >
          <el-button slot="reference"  size="mini"
                     type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>

export default {
  name: "CategoryList",
  data(){
    return{
      categoryArr:[{name:"神话"},{name:"童话"}],
    }
  },
  methods:{
    loadCategoryList(){
      let url="http://localhost:8080/categories"
      this.axios.get(url).then((response)=>{
        let responseBody=response.data;
        this.categoryArr=responseBody.data;
        console.log(this.categoryArr);
      })
    },
    update(category){
      console.log(category);

    }
  },
  mounted() {
    this.loadCategoryList();
  }
}
</script>

<style scoped>

</style>